<template>
    <div>
        <!-- 头部搜索板块 -->
        <div style="margin-top: 30px; margin-left: 30px;">
            <el-form ref="queryForm" :inline="true" label-width="70px">
                <el-row>
                    <el-form-item label="任务名称" prop="taskName">
                        <el-input v-model="taskName" placeholder="请输入任务名称" clearable style="width: 240px;" />
                    </el-form-item>
                    <el-form-item label="专家名" prop="profName">
                        <el-input v-model="profName" placeholder="请输入专家名字" clearable style="width: 240px;" />
                    </el-form-item>
                    <el-form-item label="委托单位" prop="targetUnit">
                        <el-input v-model="targetUnit" placeholder="请输入委托单位名称" clearable style="width: 240px;" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="任务类型" prop="taskType">
                        <el-select v-model="taskType" placeholder="请选择任务类型" style="display: flex; width: 240px;">
                            <el-option v-for="(item,index) in taskTypes" :key="index" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择年份" prop="dateTime">
                        <el-date-picker v-model="dateTime" type="year" format="yyyy" value-format="yyyy" placeholder="选择年份" style="width: 240px;" />
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">
                        搜索
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addProfTask()">
                        新增专家任务
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-paperclip" size="small" @click="manageTaskType()">管理任务类型</el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 中间表格板块 -->
        <div style="margin-top: 20px;">
            <el-table ref="table" v-loading="loading" :data="profTaskData" stripe border style="width: 100%;" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column align="center" prop="profTaskId" label="任务编号" />
                <el-table-column align="center" prop="taskName" label="任务名称" />
                <el-table-column align="center" prop="taskDesc" label="委托单位" />
                <el-table-column align="center" prop="targetUnit" label="委托单位所在地址" />
                <el-table-column align="center" prop="unitPhone" label="委托单位电话" />
                <el-table-column align="center" prop="createTime" label="创建时间" />
                <el-table-column align="center" prop="taskStatus" label="任务状态" />
                <el-table-column align="center" prop="taskType" label="任务类型" />
                <el-table-column align="center" prop="operation" label="操作" width="190">
                    <template slot-scope="scope">
                        <el-button style="padding: 5px;" type="text" size="mini" @click="checkProfTaskDetails(scope.row)">查看详情</el-button>
                        <el-button style="padding: 5px;" type="danger" size="mini" @click="deleteProfTask(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
            </div>
        </div>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    data() {
        return {
            taskName: '',
            profName: '',
            targetUnit: '',
            dateTime: '',
            taskType: '',
            profTaskData: [],
            taskTypes: [],
            loading: false,
            total: 0,
            page: 1,
            size: 10
        }
    },
    mounted() {
        this.initProfTaskData(),
        this.initTaskTypes()
    },
    created() {
        this.initProfTaskData()
    },
    methods: {
        /** 初始化专家任务**/
        initProfTaskData() {
            let url = '/system/task/getAll/?page=' + this.page + '&size=' + this.size
            this.loading = true
            this.getRequest(url).then(resp => {
                this.loading = false
                if (resp) {
                    this.profTaskData = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        /** 初始化任务类型 **/
        initTaskTypes() {
            this.getRequest('/system/task/listAllTaskType').then(resp => {
                if (resp) {
                    this.taskTypes = resp.data
                }
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            var param = {page: this.page, size: this.size, taskName: this.taskName, profName: this.profName, targetUnit: this.targetUnit, dateTime: (this.dateTime).toString(), taskType: this.taskType}
            this.getRequest('/system/task/getAll', param).then(resp => {
                if (resp.status === 200) {
                    this.profTaskData = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateTime = '',
            this.taskName =  '',
            this.profName =  '',
            this.targetUnit =  '',
            this.taskType = '',
            this.initProfTaskData()
        },
        addProfTask() {
            this.$router.push({path: '/expert_task/addProfTask'})
        },
        manageTaskType() {
            this.$router.push({path: '/expert_task/taskType'})
        },
        currentChange(currentPage) {
            this.page = currentPage
            this.initProfTaskData()
        },
        sizeChange(size) {
            this.size = size
            this.initProfTaskData()
        },
        checkProfTaskDetails(data) {
            this.$router.push({path: '/expert_task/profTaskDetail', query: data})
        },
        deleteProfTask(index, data) { // 删除一个任务
            this.$confirm('此操作将永久删除任务[' + data.taskName + '],是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/task/deleteProfTask/', data.profTaskId).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initProfTaskData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>
